import { Eye, Edit3, Star, Download, BadgeDollarSign, User, Calendar, Heart } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

interface TemplateCardProps {
  id: string;
  title: string;
  description: string;
  category: string;
  tags: string[];
  downloadCount: number;
  previewUrl?: string;
  isHot?: boolean;
  author?: string;
  rating?: number;
  price?: number;
  thumbnail?: string;
}

const getCategoryColor = (category: string) => {
  switch (category) {
    case 'Planning': return 'bg-blue-100 text-blue-800';
    case 'Content Creation': return 'bg-green-100 text-green-800';
    case 'Assessment': return 'bg-purple-100 text-purple-800';
    case 'Student Engagement': return 'bg-orange-100 text-orange-800';
    case 'Communication': return 'bg-pink-100 text-pink-800';
    case 'Support & Differentiation': return 'bg-yellow-100 text-yellow-800';
    case 'Admin & Reporting': return 'bg-gray-100 text-gray-800';
    case 'PBL Case Workshop': return 'bg-indigo-100 text-indigo-800';
    default: return 'bg-gray-100 text-gray-800';
  }
};

export function TemplateCard({
  id,
  title,
  description,
  category,
  tags,
  downloadCount,
  previewUrl,
  isHot = false,
  author = 'Unknown',
  rating = 4.5,
  price = 0,
  thumbnail
}: TemplateCardProps) {
  return (
    <Card
      className="group hover:shadow-lg transition-all duration-300 bg-white/80 backdrop-blur-sm border-0 shadow-sm hover:shadow-xl hover:-translate-y-2 cursor-pointer"
    >
      <CardHeader className="p-0 relative">
        <div className="relative overflow-hidden rounded-t-lg">
          <img 
            src={thumbnail || 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop'} 
            alt={title}
            className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300 cursor-pointer"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          {isHot && (
            <Badge className="absolute top-3 right-3 bg-orange-500 text-white text-xs">HOT</Badge>
          )}
          <Badge className={`absolute top-3 left-3 ${getCategoryColor(category)}`}>{category}</Badge>
        </div>
      </CardHeader>
      <CardContent className="p-4">
        <h3 className="font-semibold text-gray-900 mb-2 line-clamp-1 group-hover:text-blue-600 transition-colors cursor-pointer">
          {title}
        </h3>
        <p className="text-gray-600 text-sm mb-3 line-clamp-2">
          {description}
        </p>
        <div className="flex flex-wrap gap-1 mb-3">
          {tags.slice(0, 2).map(tag => (
            <Badge key={tag} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
